<template>
  <div class="container">
    <title-head1 :title="'代理商实时收益统计'"></title-head1>

    <div class="group">
      <transition-group name="list" tag="div">
        <div class="item"
             v-for="item in data"
             :key="item.time"
             @animationend="removeExtraItems">
          <div style="height: 100%;width: 2px;background-color:rgb(33, 253, 254);margin-right: 10px"></div>
          {{ item.time }}<span style="margin-left: 14px;margin-right: 14px"> {{ item.name }}</span> {{ item.value }}
        </div>
      </transition-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import TitleHead1 from "@/components/TitleHead1.vue";
import { ref, onMounted, onBeforeUnmount } from "vue";

const data = ref<any>([]);
let updateTimer: any = null;

const generateNewItem = () => {
  const names = ['王', '李', '张', '陈', '刘'];
  const now = new Date();
  return {
    time: `${now.getFullYear()}-${(now.getMonth()+1).toString().padStart(2,'0')}-${now.getDate().toString().padStart(2,'0')} ${now.getHours().toString().padStart(2,'0')}:${now.getMinutes().toString().padStart(2,'0')}:${now.getSeconds().toString().padStart(2,'0')}`,
    name: `${names[Math.floor(Math.random()*names.length)]}*${Math.random().toString().slice(2,4)}`,
    value: `交易分润入账${(Math.random()*1).toFixed(2)}元`
  };
};

const removeExtraItems = () => {
  if(data.value.length > 5) {
    data.value = data.value.slice(0, 5);
  }
};

onMounted(() => {
  // 动态计算高度
  const container = document.querySelector('.group') as HTMLElement
  if (container) {
    const containerHeight = container.offsetHeight
    document.documentElement.style.setProperty('--group-height', `${containerHeight}px`)
    const itemHeight = (containerHeight - 100) / 5  // 32px为总间距
    document.documentElement.style.setProperty('--item-height', `${itemHeight}px`)
  }

  updateTimer = setInterval(() => {
    data.value.unshift(generateNewItem());
  }, 2000);
});

onBeforeUnmount(() => {
  clearInterval(updateTimer);
});
</script>

<style scoped>
.list-enter-active {
  animation: slideIn 0.5s, highlight 1s;
}
.list-leave-active {
  animation: slideOut 0.5s;
}
.list-move {
  transition: transform 0.5s;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(30px);
  }
}

@keyframes highlight {
  0% { background-color: rgba(33, 253, 254, 0.1); }
  50% { background-color: rgba(33, 253, 254, 0.3); }
  100% { background-color: #0A1A4C; }
}



.item {
  background: #0A1A4C;
  width: 100%;
  height: var(--item-height, 30px); /* 默认值80px */
  margin: 15px 0;
  display: flex;
  font-size: 14px;
  align-items: center;
  color: rgb(33, 253, 254);
}

.group {
  height: var(--group-height,calc(100% - 40px));  /* 容器总高度 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 10px 0;
  overflow: hidden;

}
</style>